import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const Guide: React.FC = () => {
    const [showPolicy, setShowPolicy] = useState<boolean>(false);
    const navigate = useNavigate();

    useEffect(() => {
        const timer = setTimeout(() => setShowPolicy(true), 2000);
        return () => clearTimeout(timer);
    }, []);

    return (
        <div style={{
            height: '100vh',
            background: '#fff',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            position: 'relative'
        }}>
            {/* 校园插画 */}
            <img
                src="../../校园生活.png"
                alt="校园插画"
                style={{ width: 300, marginBottom: 40 }}
            />
            {/* 校园生活文字 */}
            <div style={{ textAlign: 'center', marginTop: 40 }}>
                <div style={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center'
                }}>
                    <div style={{
                        background: '#ffb300',
                        borderRadius: 8,
                        width: 48,
                        height: 48,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        marginBottom: 8
                    }}>
                        <span role="img" aria-label="icon" style={{ fontSize: 28, color: '#fff' }}>🎓</span>
                        {/* 或用你自己的icon */}
                    </div>
                    <div style={{ fontSize: 18, color: '#222', fontWeight: 500 }}>校园生活</div>
                </div>
            </div>
            {/* 隐私政策弹窗 */}
            {showPolicy && (
                <div style={{
                    position: 'fixed',
                    top: 0, left: 0, right: 0, bottom: 0,
                    background: 'rgba(0,0,0,0.4)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    zIndex: 1000
                }}>
                    <div style={{
                        background: '#fff',
                        borderRadius: 12,
                        padding: '24px 20px',
                        width: 320,
                        boxShadow: '0 4px 24px rgba(0,0,0,0.12)',
                        textAlign: 'center'
                    }}>
                        <div style={{ fontWeight: 700, fontSize: 18, marginBottom: 12 }}>用户隐私政策</div>
                        <div style={{ color: '#b26a00', fontSize: 14, marginBottom: 16, textAlign: 'left' }}>
                            欢迎您使用校友圈！我们将通过《隐私政策》和《用户协议》在注册前务必认真阅读协议内容，充分理解条款内容，如有异议，您可选择不进入校友圈。一旦您确认从用户注册协议后，本协议即在您和校友圈之间产生法律效力，意味着您完全同意并接受协议的条款。
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 16 }}>
                            <button style={{
                                flex: 1, marginRight: 8, padding: '8px 0', borderRadius: 6, border: 'none', background: '#eee'
                            }}>不同意</button>
                            <button style={{
                                flex: 1, marginLeft: 8, padding: '8px 0', borderRadius: 6, border: 'none', background: '#ffb300', color: '#fff'
                            }} onClick={() => navigate('/login')}>同意</button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default Guide; 